<template>
    <div class="login">
        <el-card class="card">
            <div class="title">用户登录</div>
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" class="ruleForm" status-icon >
                <el-form-item prop="mobile">
                    <el-input v-model="ruleForm.mobile" :prefix-icon="User" placeholder="请输入账号" maxlength="11" show-word-limit />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="ruleForm.password" :prefix-icon="Lock" type='password' placeholder="请输入账号" />
                </el-form-item>
                <div class="mt20 text-center">
                    <el-button type="primary" style="width: 100%;" @click="submitForm(ruleFormRef)" :loading="loading"> 登录 </el-button>
                </div>
            </el-form>
        </el-card>
    </div>
</template>

<script lang="ts" setup>
import { ref,reactive,onMounted } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import router from '../../router';
import { ElMessage, FormInstance, FormRules } from 'element-plus';
import http from '../../util/request';

const loading = ref<boolean>(false)

interface RuleForm {
    mobile: number|string
    password: string
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    mobile: '',
    password: '',
})

const rules = reactive<FormRules<RuleForm>>({
    mobile: [
        { required: true, message: '请输入手机号码', trigger: 'blur' },
        { min: 11, message: '手机号码格式错误', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 30, message: '范围在6-30字之间', trigger: 'blur' },
    ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            http.post('/login',ruleForm.value).then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);return;
                }
                ElMessage.success(response.data.msg);
                sessionStorage.setItem('token',response.data.token)
                sessionStorage.removeItem('project')
                sessionStorage.setItem('user',JSON.stringify(response.data.user))
                router.push({ name: 'public'})
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

onMounted(()=>{

})
</script>

<style scoped>
.login{background-image: url('https://mall-1301398555.cos.ap-shanghai.myqcloud.com/admin-background.jpg');background-repeat: no-repeat;background-size: 100% 100%;width: 100%;height: 100%;position: absolute;}
.card{width: 400px;padding: 90px 30px 60px 30px;margin:0px auto;background-color: #FFF;margin-top: 10%;}
.title{text-align: center;font-weight: 600;font-size: 1.2rem;color: #666;}
.ruleForm{margin-top: 30px;}
</style>